<template>
	<view>
		<view class="tui-flex  im-text-item" @longpress="clipboard">
			<view class="tui-col-4 im-user-item text-cut">{{ title }}</view>
			<view class="  im-user-item-text text-cut" :class="rightIcon ? 'tui-col-6' : 'tui-col-8'">
				<view :class="textRight ? 'tui-text-right' : ''">{{ text }}</view>
			</view>
			<view @click="comitAction" class="tui-col-2 tui-text-right" v-if="rightIcon"><tui-icon :name="rightIcon" :size="20" color="#ff7900"></tui-icon></view>
		</view>
		<view class="tui-flex" v-if="divider">
			<view class="tui-col-4" />
			<tui-divider dividerColor="grey" class="tui-col-8" height="20"></tui-divider>
		</view>
	</view>
</template>
<script>
const clipboardUtil = require('@/common/js/tui-clipboard/tui-clipboard.js');
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		text: {
			type: String,
			default: ''
		},
		rightIcon: {
			type: String,
			default: ''
		},
		divider: {
			type: Boolean,
			default: false
		},
		textRight: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	methods: {
		comitAction() {
			this.$emit('comitAction', {});
		},
		clipboard: function(event) {
			let data = this.text;
			clipboardUtil.getClipboardData(
				data,
				res => {
					// #ifdef H5 || MP-ALIPAY
					if (res) {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
					// #endif
				},
				event
			);
		}
	}
};
</script>

<style scoped>
.im-user-item {
	font-size: 30rpx;
	font-weight: 500;
	color: #000000;
}
.im-user-item-text {
	font-size: 30rpx;
	font-weight: 300;
}
.im-text-item {
	width: 100%;
	margin-top: 10rpx;
}
</style>
